<template>
	<div class="tabsClass">
		<div class="treesty">
			<el-tabs
				v-model="activeName"
				v-loading="state.loading"
				class="demo-tabs"
				@tab-change="handleClick"
			>
				<el-tab-pane label="组织架构" name="0"></el-tab-pane>
				<el-tab-pane label="项目类型" name="1"></el-tab-pane>
			</el-tabs>
			<el-tree
				:data="data"
				:node-key="state.tabId"
				default-expand-all
				:expand-on-click-node="false"
				@node-click="handleNodeClick"
			>
				<template #default="{ data }">
					<span class="custom-tree-node">
						
						<span>{{ data[state.tabName] }}</span>
					</span>
				</template>
			</el-tree>
		</div>
		<div style="flex: 1" class="tabBox">
			<tableIndex
				ref="tableindex"
				:tableData="tableData"
				:tableHead="tableHead"
				:isIndex="true"
				:isSelection="true"
				:isRadio="false"
				:fields="state.fields"
				:height="500"
				:page="page"
				@selectChange="selectChange"
				@searchList="searchList"
				@page-change="pageChange"
			>
				<template #btns>
					<div style="float: right">
						<el-button
							size="small"
							plain
							class="update"
							@click="
								onExport({
									...getSearchData(),

									prepareStatus: 1,
								})
							"
							><svg-icon icon-class="export" /> 一键导出</el-button
						>
					</div>
				</template>
				<template #operate>
					<el-table-column
						label="操作"
						width="400"
						align="center"
						fixed="right"
					>
						<template #default="{ row }">
							<el-button
								size="small"
								class="end"
								type="primary"
								@click="statusChangeHandler(row)"
								>状态变更</el-button
							>
							<el-button
								size="small"
								class="end"
								type="primary"
								@click="projectEditHandler(row)"
								>编辑</el-button
							>
							<el-button
								size="small"
								class="look"
								type="primary"
								@click="lookHandler(row)"
								>查看</el-button
							>
							<el-button
								size="small"
								class="update"
								type="primary"
								@click="pushProjectPlan(row)"
								>进度管理</el-button
							>
							<el-button
								size="small"
								class="look_kb"
								type="primary"
								@click="projectKanBan(row)"
								>项目看板</el-button
							>
							<el-button size="small" class="look" type="primary"
								>报送</el-button
							>
						</template>
					</el-table-column>
				</template>
			</tableIndex>
			<preliminaryCom ref="preliminary"></preliminaryCom>
			<!-- <projectStage ref="projectstage"></projectStage> -->
		</div>
	</div>
</template>
<script setup>
import tableIndex from "@/components/table/index.vue";
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import preliminaryCom from "./components/status_change_dialog.vue";
// import projectStage from './components/projectPhaseDialog.vue'
import { ElDialog, ElTabPane, ElTabs, ElForm, ElFormItem } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { projectConfigApi, department, publicProject } from "@/api/project.js";
import { deriveHandelFnc } from "@/hooks/downCommon";

//路由跳转
let router = useRouter();
let tableindex = ref(null);
let activeName = ref("0");
let preliminary = ref(null);
let projectstage = ref(null);
let data = reactive([
	{
		label: "1",
		children: [
			{
				label: "Level two 2-2",
				children: [
					{
						label: "Level three 2-2-2",
					},
				],
			},
		],
	},
	{
		label: "2",
		children: [
			{
				label: "Level two 3-1",
				children: [
					{
						label: "Level three 3-1-1",
					},
				],
			},
			{
				label: "Level two 3-3",
				children: [
					{
						label: "Level three 3-3-1",
					},
				],
			},
		],
	},
]);
let state = reactive({
	treeDepartmentId: "",
	tabId: "departmentId",
	tabName: "departmentName",
	loading: true,

	fields: [
		{ key: "projectName", label: "项目名称", type: "input" },
		{ key: "responsibleUserName", label: "发起责任人", type: "input" },
		{
			key: "projectTypeId",
			label: "项目类型",
			type: "select",
			options: {
				list: [
					{
						label: "全部",
						value: "",
					},
					{
						label: "未开工",
						value: -2,
					},
					{
						label: "停工",
						value: -1,
					},
					{
						label: "竣工",
						value: 1,
					},
					{
						label: "其他",
						value: 2,
					},
					{
						label: "已立项项目",
						value: 3,
					},
				],
			},
		},
		// { key: "name", label: "时间", type: "datetimerange" },
	],
});
const formInline = reactive({
	user: "",
	region: "",
	date: [],
	radio: 0,
});

const page = reactive({
	page: 1,
	pageSize: 10,
	total: 0,
});
// tabs相关
//获取部门信息
const getdepartmentList = () => {
	department.getProjectPhase().then((res) => {
		if (res.code == 200) {
			data = res.data;
			state.loading = false;
		}
		console.log("----------------", data);
	});
};
const handleClick = (e) => {
	console.log("00000", activeName);
	switch (activeName.value) {
		case "0":
			state.loading = true;
			getdepartmentList();
			state.tabId = "departmentId";
			state.tabName = "departmentName";
			break;
		case "1":
			state.loading = true;
			publicProjectData();
			state.tabId = "projectTypeId";
			state.tabName = "typeName";
			break;
		default:
			break;
	}
};

// tree相关的数据

// tree相关的数据

const handleNodeClick = (data) => {
	state.treeDepartmentId = data.departmentId;
	let obj = {
		departmentId: state.treeDepartmentId || "",
		projectTypeId: data.projectTypeId || "",
		...getSearchData(),
	};
	getPage(obj);
};
// --------------
// table相关
let tableHead = reactive([
	{
		prop: "address",
		label: "关注",
		isSvg: ["gz_true", "gz_false"],
	},
	{
		prop: "projectName",
		label: "项目名称",
		width: "120",
		style: {
			color: "#FC7018",
		},
	},
	{
		prop: "responsibleDepartmentName",
		label: "项目发起部门",
	},
	{
		prop: "typeName",
		label: "项目类型",
	},
	{
		prop: "streetName",
		label: "所属街道",
	},
	{
		prop: "responsibleUserName",
		label: "发起责任人",
	},
	{
		prop: "submitCompany",
		label: "报送单位",
	},
	{
		prop: "projectAmount",
		label: "项目总投(万)",
	},
	{
		prop: "applyTime",
		label: "立项时间",
	},
]);
let tableData = ref([]);

//获取搜索组件数据
const getSearchData = () => {
	return tableindex.value.getSearchData();
};
//获取项目类型
const publicProjectData = () => {
	publicProject.getProjectTypeTreeVo().then((res) => {
		if (res.code == 200) {
			data = res.data;
			state.loading = false;
		}
	});
};
//项目状态变更
const statusChangeHandler = (row) => {
	preliminary.value.state.centerDialogVisible = true;
};

//项目编辑
const projectEditHandler = (row) => {
	router.push({
		path: `/constructionProjectManage/project_mt/components/projectInfo/type=${1}&id=${
			row?.projectId || ""
		}`,
	});
};
//项目阶段修改
const pushProjectPlan = (row) => {
	router.push({
		path: `/constructionProjectManage/projectPlan/index/type=${1}&id=${
			row?.projectId || ""
		}`,
	});
};
//项目看板
const projectKanBan = (row) => {
	
	router.push({
		path: `/constructionProjectManage/projectsPectaculars/pectaculars/type=${1}&id=${
			row?.projectId || ""
		}&name=${row?.projectName || ""}`,
	});
};
//项目查看
const lookHandler = (row) => {
	router.push({
		path: `/constructionProjectManage/project_mt/components/lookProjectInfoAll/type=1&id=${row.projectId}`,
	});
};
const getpublicProject = () => {
	publicProject.getProjectTypeVo("").then((res) => {
		if (res.code == 200) {
			res.data.forEach((item) => {
				state.fields[2].options.list.push({
					label: item.parentTypeName,
					value: item.projectTypeId,
				});
			});
		}
	});
};
//搜索查询
const searchList = (e) => {
	if (state.treeDepartmentId) {
		e.departmentId = state.treeDepartmentId;
	}
	getPage(e);
};
//分页
const pageChange = (e) => {
	page.page = e.page;
	page.pageSize = e.limit;

	getPage();
};

const getPage = (e) => {
	let data = {
		pageNum: page.page,
		pageSize: page.pageSize,
		param: {
			...e,
			prepareStatus: 1,
		},
	};
	projectConfigApi.getProjectPage(data).then((res) => {
		if (res.code == 200) {
			tableData.value = res.data.content;
			page.total = res.data.totalSize;
			console.log(tableData);
		}
	});
};

const exportConfig = reactive({
	fileName: "正式项目管理",
	apiPath: "projectExport",
	form: {},
});
const { onExport } = deriveHandelFnc(exportConfig);

const selectChange = (row) => {
	console.log(row);
};
onBeforeMount(() => {
	getdepartmentList();
});
onMounted(() => {
	getPage();
	getpublicProject();
});
</script>
<style lang="scss" scoped>
@import "@/assets/general_style/dialog.scss";
@import "@/views/constructionProjectManage/static/button.scss";
.tabsClass {
	display: flex;
	.treesty {
		width: 13%;

		margin-right: 10px;
		.demo-tabs {
			width: 100%;
		}
		.el-tree {
			overflow-y: scroll;
			height: 500px;
		}
	}
	.tabBox {
		width: 87%;
	}
}
</style>
